<template>
    <div class="container">
        <el-card class="box-card" shadow="none" border="none">
            <div slot="header" class="clearfix">
                <el-page-header @back="goBack" :content="title"></el-page-header>
            </div>
            <div class="enterprise_detail_content">
                <!-- 企业图片 -->
                <el-image style="width: 100%; height: 300px" :src="data.img" fit="cover"></el-image>
                <h1>{{ data.name }}</h1>
                <!-- 地图 -->
                <Map :position="position" />
                <el-descriptions title=" " :column="4" border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-star-off"></i> &nbsp;星级
                        </template>
                        <el-rate v-model="data.star" disabled show-score text-color="#ff9900" score-template="{value}">
                        </el-rate>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg-icon iconname="icon-shiyan" /> &nbsp;最大容量
                        </template>
                        {{ data.capacity }}</el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg-icon iconname="icon-tingchewei" /> &nbsp;停车位
                        </template>
                        {{ data.parking_space }}</el-descriptions-item>
                    <el-descriptions-item label="剩余车位">
                        <template slot="label">
                            <svg-icon iconname="icon-shengyuliang" /> &nbsp;剩余车位
                        </template>
                        {{ data.current_parking }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-information"></i> &nbsp;位置
                        </template>
                        {{ data.location }}</el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <svg-icon iconname="icon-icon_xinyong_xianxing_jijin-" /> &nbsp;诚信状况
                        </template>

                        {{ data.credit }}/10</el-descriptions-item>
                    <el-descriptions-item label="">
                        <template slot="label">
                            <i class="el-icon-user"></i> &nbsp;当前人数
                        </template>
                        {{ data.current_people }}</el-descriptions-item>
                </el-descriptions>
                <div class="content">
                    {{ data.introduction }}
                </div>
                <el-divider v-if="divider_visible"><el-button type="text" @click="get_more()">更多信息</el-button></el-divider>

                <el-container v-if="!divider_visible" class="more">

                    <!-- 救援车辆 -->
                    <h3>救援车辆</h3>
                    <el-row v-for="it in more_car" :key="it.id + '-label'">
                        <el-col :span="24">
                            <el-descriptions :column="3" border style="width:100%">
                                <el-descriptions-item label="车牌号">
                                    {{ it.license_number }}
                                </el-descriptions-item>
                                <el-descriptions-item label="驾驶员">
                                    {{ it.driver_name }}
                                </el-descriptions-item>
                                <el-descriptions-item label="联系方式">
                                    {{ it.phone }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>

                    <!-- 管理人员 -->
                    <h3>管理人员</h3>
                    <el-row v-for="it in more_admin" :key="it.id + '-label1'">
                        <el-col :span="24">
                            <el-descriptions :column="4" border style="width:100%">
                                <el-descriptions-item label="姓名">
                                    {{ it.name }}
                                </el-descriptions-item>
                                <el-descriptions-item label="年龄">
                                    {{ it.age }}
                                </el-descriptions-item>
                                <el-descriptions-item label="性别">
                                    {{ it.gender }}
                                </el-descriptions-item>
                                <el-descriptions-item label="职位">
                                    {{ it.position }}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-col>
                    </el-row>


                    <!-- 导游，仅当企业为旅行社时可见 -->
                    <el-row v-for="it in more_guide" :key="it.id + '-label2'">
                        <el-col :span="24">
                            <div v-if="more_guide.length !== 0 && !divider_visible">
                                <h3>导游</h3>
                                <el-descriptions :column="3" border style="width:100%">
                                    <el-descriptions-item label="姓名">
                                        {{ it.name }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="性别">
                                        {{ it.gender }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="行程">
                                        {{ it.itinerary_name }}
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </el-container>
                <el-backtop target=".enterprise_detail_content">
                    <el-button type="primary" icon="el-icon-caret-top" circle></el-button></el-backtop>
            </div>

        </el-card>
    </div>
</template>

<script>

import Map from "@/components/reusable_components/map.vue";
import SvgIcon from './SvgIcon.vue';
export default {
    components: {
        Map,
        SvgIcon
    },

    data() {
        return {
            divider_visible: true,
            enterprise_detail_id: null,
            title: '',
            user: '',
            position: [],
            data: {
                id: 0,
                name: "",
                capacity: 0,
                parking_space: 0,
                current_people: 0,
                current_parking: 0,
                location: '河南黄山',
                credit: 0,
                img: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
                introduction: '',
                star: 0,
                latitude: 30.150373,
                longitude: 118.163269,
            },
            // 下边三个都是点击更多才会使用到的数据
            more_car: [],
            more_admin: [],
            more_guide: [],
        }
    },

    mounted() {
        this.enterprise_detail_id = this.$route.query.id // 取得企业id
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_enterprise_detail()

    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        async get_enterprise_detail() {
            // //.log(this.enterprise_detail_id)

            try {
                const res = await this.$http.get("/findTourismEnterpriseById", {
                    // 携带数据
                    params: {
                        id: this.enterprise_detail_id
                    }
                });

                this.data = res.data.data
                this.position[0] = this.data.longitude
                this.position[1] = this.data.latitude
            } catch (error) { }
        },

        async get_more() {
            let url_1 = ''
            let url_2 = ''
            switch (this.user) {
                case 'hot_scenic_spot':
                case 'hot_hotel':
                case 'hot_travel_agency':
                    url_1 = '/findRescueVehicleByAffiliatedEnterprise'
                    url_2 = '/findAdministratorByAffiliatedEnterprise'
                    break;
                default:
                    break;
            }
            this.divider_visible = false
            // 这里需要获取车辆、管理人员、导游
            // 获取车辆
            try {
                const res = await this.$http.post(url_1, {
                    // 携带数据
                    affiliated_enterprise: this.enterprise_detail_id
                });
                this.more_car = res.data.data
            } catch (error) { }

            // 获取管理人员
            try {
                const res = await this.$http.post(url_2, {
                    // 携带数据
                    affiliated_enterprise: this.enterprise_detail_id
                });
                this.more_admin = res.data.data
                //.log(this.more_admin)
            } catch (error) { }

            // 获取导游
            if (this.user === 'hot_travel_agency') {
                try {
                    const res = await this.$http.post('/findGuideByAgency_id', {
                        // 携带数据
                        agency_id: this.enterprise_detail_id
                    });
                    this.more_guide = res.data.data
                } catch (error) { }
            }
        },
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .enterprise_detail_content {
        height: 80vh;
        overflow: auto;

        -ms-overflow-style: none;
        /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */
    }

    .enterprise_detail_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .more {
        margin-top: 1vh;
        display: block;
    }

}
</style>